<template>
  <pf-table
    ref="pfTable"
    v-model="form"
    :columns="columns"
    :form-items="formItems"
    @get-table-data="getTableData"
  >
    <template #handle-area>
      <el-button type="primary" @click="noticeHandle">短信通知</el-button>
    </template>
    <template #handle="{row}">
      <el-button type="text" @click="noticeHandle(row)">短信通知</el-button>
    </template>
  </pf-table>
</template>

<script>
import { getUsedList } from '@/api/coupon'
export default {
  name: 'UnusedList',
  data() {
    return {
      form: {},
      loading: false
    }
  },
  computed: {
    columns() {
      const attrs = { 'min-width': '150px' }
      return [
        { label: '优惠券ID', prop: 'account', attrs },
        { label: '用户名称', prop: 'roleName', attrs },
        { label: '手机号', prop: 'userName', attrs },
        { label: '领券时间', prop: 'mobile', attrs },
        { label: '操作', slot: 'handle', attrs: { width: '120px' }}
      ]
    },
    formItems() {
      return [
        {
          type: 'input',
          label: '用户名称',
          prop: 'roleName'
        }, {
          type: 'input',
          label: '手机号',
          prop: 'roleName'
        }
      ]
    }
  },

  methods: {

    getTableData({ pageNo, pageSize, ...formQuery }, done) {
      this.loading = true
      const data = {
        pageNo,
        pageSize,
        ...formQuery
      }
      getUsedList(data).then(res => {
        this.loading = false
        done({ data: res.data || [], total: res.count || 0 })
      }).catch(() => {
        done({ data: [], total: 0 })
        this.loading = false
      })
    },

    // 短信通知
    noticeHandle() {
    }
  }
}
</script>

<style lang="scss" scoped></style>
